import { LeftOutlined, MoonOutlined } from '@ant-design/icons';
import LoginStore from '../../store/Login/index';
import { GetArticleById, GetArticleBySeriesId,GetArticleSeriesById } from '../../api/Home/index';
import { useState, useEffect } from 'react';
const ArticleSeries = ({ ArticleId, back, clickToArticle }) => {

    // const { userInfo } = LoginStore();

    const [Article, setArticle] = useState({});

    const [ArticleSeries, setArticleSeries] = useState({});

    const [ArticleList, setArticleList] = useState([]);

    useEffect(() => {
        console.log(ArticleId);
        GetArticleById(ArticleId).then(({ data }) => {//根据id获取文章
            console.log('series-id:',data.data.seriesId);
            // //Get-SeriesId
            setArticle(data.data);

            GetArticleSeriesById(data.data.seriesId).then(({ data }) => {//根据系列id获取系列
                console.log('系列数据:',data.data);
                setArticleSeries(data.data);
            });

            GetArticleBySeriesId(data.data.seriesId).then(({ data }) => {//根据系列id获取文章
                // console.log('2', data.data);

                setArticleList(data.data);
            })
        });
    }, [])
    return (
        <>
            <div className='flex justify-between'>
                <LeftOutlined onClick={back} />
                <h1>{ArticleSeries.name}</h1>
                <MoonOutlined />
            </div>
            {
                ArticleList.map((item, index) => {
                    return (
                        <div key={item.id}>
                            <div className='mt-10' onClick={() => clickToArticle(item.id)}>
                                <div className='
                                flex
                                justify-between
                                border-b-2
                                border-gray-300
                                p-3
                                '>
                                    <p>{index}. {item.title}</p>
                                    <p>{item.createTime.split('T')[0]}</p>
                                </div>
                            </div>
                        </div>

                    )
                })

            }
        </>

    );
}

export default ArticleSeries;